<template>
    <!-- 使用 v-on 或者 @ 符号绑定事件 -->

    <!-- 绑定一个 click 事件 -->
    <button v-on:click="counter += 1">点击 {{ counter }}</button>
    <!-- 也可以简写为 @ -->
    <button @:click="counter += 1">点击 {{ counter }}</button>

    <!-- 可以接收调用方法名称 -->
    <button @click="change_message">点击更新 message</button>
    <p><strong>message</strong>: {{ message }}</p>

    <!-- 也可以接收 event -->
    <button @click="use_event">点击更新按钮文字</button>

    <!-- 支持传参 -->
    <button @click="say('hello')">say hello !</button>
</template>

<script>
export default {
    data() {
        return {
            counter: 0,
            message: 'Hello Vue!',
        }
    },
    methods: {
        change_message() {
            // 使用 this 即可访问 data 中的数据
            this.message = 'Hello World!'
        },
        use_event(event) { // 括号中同样可以传入 event
            event.target.innerText = 'Hello World!'
        },
        say(msg) {
            alert(msg)
        }
    }
}
</script>